<!-- 风险测评 -->
<template>
	<view class="container">
		<FeNavbar title="风险测评" />
		<template v-if="step == 'ready'">
			<view class="risk-notice-wrap">
				<view class="notice-panel">
					<image src="/static/fx-banner.png" mode="widthFix"></image>
					<view class="notice-content">
						1、向本行第一次申请任何理财投资产品前，请填写本问卷，并于每年进行重新评估。
						如果您发生可能影响自身风险承受能力的情形，请主动重新进行评估。
					</view>
					<view class="notice-content">
						2、风险提示:投资需承担各类风险，可能遭受资金损失。
						同时，投资时应考虑本金兑付风险市场风险、流动性风险、汇率风险、信用风险利率风险、税赋风险、产品复杂度风险等各类风险。
					</view>
					<view class="notice-content">
						本问卷旨在了解您的财务状况、投资经验、投资风格、投资目的、风险偏好和风险承受能力等借此协助您选择合适的金融产品或服务类别，
						以达到您的投资目标。
					</view>
					<view class="notice-content">您每次进行风险承受能力评估，请确认根据您本人的真实意愿进行。</view>
					<view class="notice-content">您每次进行风险承受能力评估，请确认根据您本人</view>
				</view>
				<view class="start-btn" @click="handleStartAnswer">开始答题</view>
			</view>
		</template>
		<template v-if="step == 'start'">
			<view class="risk-start-body">
				<view class="answer-panel">
					<view class="number-row">
						<view class="now-num">{{nowNum+1}}</view>
						<view class="total-num">/{{totalNum}}</view>
					</view>
					<view class="topic-txt">{{questionsList[nowNum].question}}</view>
					<view class="options-wrap">
						<view class="opt-item" :class="questionsList[nowNum].select == key ? 'opt-select' : ''"
							v-for="(value,key,index) in questionsList[nowNum].options" :key="index"
							@click="handleSelectOptions(key,questionsList[nowNum].id)">{{key}}. {{value}}</view>
					</view>
				</view>
				<view class="answer-btns">
					<view class="btn btn1" :class="nowNum == 0 ? 'btn-diabled' : ''" @click="preQuestion">上一题</view>
					<view class="btn btn2" @click="nextQuestion">
						{{nowNum+1 == totalNum ? "提交测评" : "下一题"}}
					</view>
				</view>
			</view>
		</template>
		<template v-if="step == 'complete'">
			<view class="complete-body">
				<!-- <view class="complete-panel"> -->
				<view class="head-row">
					<image src="/static/risk-gou.png" mode="aspectFill"></image>
					<text>评估完成</text>
				</view>
				<view class="complete-content">
					<image src="/static/risk-ok.png" mode="aspectFill"></image>
					<view class="t1">{{riskResult.description || "您当前风险承受等级"}}</view>
					<view class="t2">{{riskResult.riskProfile}}</view>
					<view class="t3">{{riskResult.recommendations || "风险是投资路上的坎坷，而我选择稳健前行，守护每一笔财富"}}</view>
				</view>
				<view class="complete-btn" @click="handleComplete">完成</view>
				<!-- </view> -->
			</view>
		</template>
	</view>
</template>

<script>
	import {
		riskQuestions,
		riskSubmit
	} from "@/api/risk.js"
	import {
		userProfile
	} from "@/api/user.js"
	export default {
		data() {
			return {
				step: "ready", // ready-准备答题；start-开始答题；complete-答题完成
				nowNum: 0,
				totalNum: 0,
				questionsList: []
			};
		},
		onLoad() {
			this.reqRiskQuestions()
		},
		methods: {
			async reqRiskQuestions() {
				uni.showLoading({
					title: "请稍后...",
					mask: true
				})
				const result = await riskQuestions();
				this.questionsList = result.data.questions || [];
				this.totalNum = this.questionsList.length;
			},

			// 开始答题
			handleStartAnswer() {
				this.step = "start";
			},
			handleSelectOptions(selectKey, id) {
				for (let a = 0; a < this.questionsList.length; a++) {
					if (this.questionsList[a].id == id) {
						this.questionsList[a]["select"] = selectKey;

						this.questionsList = [...this.questionsList, ...[]];
						break;
					}
				}
			},
			preQuestion() {
				if (this.nowNum == 0) return
				this.nowNum > 0 && this.nowNum--;
			},
			async nextQuestion() {
				// 未作答
				if (!this.questionsList[this.nowNum].hasOwnProperty("select")) {
					uni.showToast({
						title: "请作答",
						icon: "none"
					})
					return
				}

				if (this.nowNum == (this.totalNum - 1)) {
					uni.showLoading({
						title: "提交中...",
						mask: true
					})
					let answers = []
					this.questionsList.map(item => {
						answers.push(item.select)
					})
					const result = await riskSubmit({
						answers
					});
					this.riskResult = result.data;
					uni.showToast({
						title: "提交成功",
						duration: 2000,
						mask: true
					})
					setTimeout(() => {
						uni.showLoading({
							title: "获取结果中...",
							mask: true
						})
					}, 2000)

					setTimeout(() => {
						uni.showToast({
							title: "评估完成",
							duration: 2000,
							mask: true
						})
						this.step = "complete";
					}, 4000)
					
					// 刷新存在userInfo中的测评信息
					const result2 = await userProfile();

					const updateUserInfo = {
						...getApp().globalData.userInfo,
						...result2.data
					}
					uni.setStorageSync("userInfo", updateUserInfo);
					getApp().globalData.userInfo = updateUserInfo;

					return
				}

				if (this.nowNum < (this.totalNum - 1)) {
					this.nowNum++;
				}
			},
			handleComplete() {
				this.toBack();
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		min-height: 100vh;
		background-color: #F5F7F8;

		.risk-notice-wrap {
			padding: 0 32rpx;
			margin-top: 70rpx;

			.notice-panel {
				background-color: #ffffff;
				border-radius: 12rpx;
				padding: 16rpx 30rpx 30rpx 30rpx;

				image {
					width: 100%;
					height: 232rpx;
				}

				.notice-content {
					font-size: 28rpx;
					line-height: 44rpx;
					color: $font-color;
					text-align: justify;
					margin-bottom: 30rpx;
				}
			}

			.start-btn {
				flex: 1;
				height: 92rpx;
				line-height: 92rpx;
				text-align: center;
				font-size: 32rpx;
				font-weight: 600;
				border-radius: 12rpx;
				margin-top: 40rpx;
				color: $font-color;
				background-color: $btn-bg-color;
			}
		}

		.risk-start-body {
			padding: 0 32rpx;
			margin-top: 48rpx;

			.answer-panel {
				background-color: #ffffff;
				border-radius: 12rpx;
				padding: 24rpx 30rpx 40rpx 30rpx;

				.number-row {
					display: flex;
					align-items: flex-end;

					.now-num {
						font-size: 56rpx;
						font-weight: bold;
						line-height: 65rpx;
						color: $font-color;
					}

					.total-num {
						font-size: 28rpx;
						font-weight: bold;
						line-height: 32rpx;
						color: #A6ACB4;
					}
				}

				.topic-txt {
					font-size: 40rpx;
					font-weight: 600;
					line-height: 46rpx;
					color: $font-color;
					padding: 20rpx 0 40rpx 0;
				}

				.options-wrap {
					.opt-item {
						padding: 36rpx 24rpx;
						font-size: 28rpx;
						line-height: 33rpx;
						font-weight: 600;
						background-color: #F5F7FA;
						color: $font-color;
						border-radius: 12rpx;
						margin-bottom: 24rpx;
					}

					.opt-select {
						background-color: $btn-bg-color;
					}
				}
			}

			.answer-btns {
				width: 100%;
				display: flex;
				align-items: center;
				color: $font-color;
				margin-top: 40rpx;

				.btn {
					flex: 1;
					height: 88rpx;
					line-height: 88rpx;
					text-align: center;
					font-size: 30rpx;
					font-weight: 600;
					border-radius: 12rpx;
					text-align: center;
				}

				.btn1 {
					background-color: #ffffff;
					margin-right: 42rpx;
				}

				.btn2 {
					background-color: $btn-bg-color;
				}

				.btn-diabled {
					color: #A6ACB4;
				}
			}
		}

		.complete-body {
			padding: 0 32rpx;
			margin-top: 24rpx;

			.head-row {
				height: 92rpx;
				background-color: #ffffff;
				border-radius: 12rpx;
				display: flex;
				align-items: center;
				font-size: 30rpx;
				color: $font-color;

				image {
					width: 40rpx;
					height: 40rpx;
					margin-left: 30rpx;
					margin-right: 20rpx;
				}
			}

			.complete-content {
				background-color: #ffffff;
				border-radius: 12rpx;
				text-align: center;
				margin-top: 24rpx;

				image {
					width: 316rpx;
					height: 290rpx;
					margin-top: 80rpx;
					margin-bottom: 48rpx;
				}

				.t1 {
					font-size: 28rpx;
					color: #7B828A;
					line-height: 32rpx;
				}

				.t2 {
					font-size: 52rpx;
					color: $font-color;
					line-height: 60rpx;
					font-weight: 600;
					margin: 30rpx auto;
				}

				.t3 {
					font-size: 26rpx;
					color: #A6ACB4;
					line-height: 30rpx;
					padding: 0 70rpx 48rpx 70rpx;
				}
			}

			.complete-btn {
				width: 100%;
				height: 92rpx;
				line-height: 92rpx;
				background-color: #FFE269;
				color: $font-color;
				font-size: 32rpx;
				font-weight: 600;
				text-align: center;
				margin-top: 40rpx;
				border-radius: 12rpx;
			}
		}
	}
</style>